<html>
<style>
	table {
	  border-collapse: collapse;
	  border-spacing: none;
	  align:center;
	  }
	 
	  tr th{
		border-top:0;
		border-left:0;
		border-right:0;
		border-bottom: 2px solid;	
		text-align:left;
	  }

	thead th {
	  background-color: #F7BE81;
	  font-size: 12px;
	  font-family: sans-serif;
	 border:none; 
	  }

	tbody td {
	  font-size: 12px;  	 
	}

	tr th:first-child {
		  border-top-left-radius: 6px;
		  border-bottom-left-radius: 6px;	  
	}

	tr td:last-child,
	tr th:last-child {
	  border-top-right-radius: 6px;
	  border-bottom-right-radius: 6px;
	}

	label{
		font-weight:bold;
	}
</style>


 <div ng-app="myApp"> 
	<h3>STB Master </h3> 
		<form  method="post" action=""> 
			<table>
				<tr>
					<td><label>* STB Number</label></td> <td>:</td>
					<td width="200">
						<input type="text" ng-model="num" class="input-medium" auto-complete ui-items="typearr">
					</td> 																				
					<td><button ng-click="upd()"  class="btn btn-success" ng-disabled="!ed">Update</button> </td>
					<td><button ng-click="save()" class="btn btn-info" ng-disabled="ed">Save</button></td> 	
					<td><button href="#/cancel/" ng-click="cancel()" class="btn">Clear</button> </td> 	
				</tr>
				<span class="pull-right"> <input type="text" ng-model="search" class="search-query" placeholder="Search"/></span>					
			</table>
			
			
			<table class="table table-striped">
				<thead>
					<tr>
						<th>Sr. No.</th>
						<th><a href="" ng-click="predicate = '-num';reverse=!reverse">STB Number</a></th>		
						<th>Status</th>			
						<th>Delete</th>						
						<th>Edit</th>						
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="item in stbdata |filter:search| orderBy:predicate:reverse| startingFrom:currentPage*pageSize | limitTo:pageSize ">
						<td>{{item.id}}</td>
						<td>{{item.num}}</td>												
						<td>{{item.flag}}</td>												
						<td><a ng-click="dlt(item.id)"> 
							<img src="glyphicons_bin.png" alt="Delete" width="15" height="15"/></td> 
                         <td><a ng-click="edit(item.id)"> 
							<img src="glyphicons_edit.png" alt="Edit" /></td>						
					</tr>
				</tbody>
				<tfoot>					
					<td colspan="6">						
						<div class="pagination pull-left">
							Current Page  {{currentPage+1}} of {{Math.ceil(stbdata.length/pageSize)}}
						</div>
						<div class="pagination pull-right">
							<ul>    
								<button class="btn btn-info"  ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> &#8606; Prev </button>                               
									<li ng-repeat="n in range(stbdata.length)"
										ng-class="{active: n == currentPage}"
										ng-click="setPage()">
											<a href ng-bind="n + 1">1</a>
									</li> 
									<button class="btn btn-info"  ng-disabled="currentPage >= stbdata.length/pageSize - 1" ng-click="currentPage=currentPage+1">
										Next &#8608;
									</button>						
							</ul>
						</div>
					</td>
				</tfoot>  
			</table>
		</form>
	</body>
</html>